<!--
 * @Author: wang_changtan 2196064304@qq.com
 * @Date: 2024-02-20 08:47:58
 * @LastEditors: wang_changtan 2196064304@qq.com
 * @LastEditTime: 2024-03-10 20:07:07
 * @FilePath: /web_music_app_vue3_vite_ts/src/views/home/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div style="height: 100%;overflow-y: auto;">
        <div class="carousel">
            <el-carousel :interval="4000" type="card" height="200px">
                <el-carousel-item v-for="(item, index) in datas.banners" :key="index">
                    <div class="car-item">
                        <img style="width: 100%; height: 200px;" :src="item.imageUrl" alt="">
                        <div class="title" :style="{background: item.titleColor}">{{ item.typeTitle }}</div>
                    </div>
                    <!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="h-item">
            <div class="item-title">
                推荐歌单
                <el-icon style="font-size: 20px;padding-left: 4px;">
                    <ArrowRight />
                </el-icon>
            </div>
            <div class="item-grid">
                <div class="g-item">
                    <div class="g-item-img">
                        <div class="g-desc">
                            根据您的音乐口味生成每日更新
                        </div>
                        <div class="img-start">
                            <img src="/src/assets/svg/start.svg" alt="">
                        </div>
                    </div>
                    <div class="g-i-desc">每日歌曲推荐</div>
                </div>
            </div>
        </div>

        <div class="h-item">
            <div class="item-title">
                独家放送
                <el-icon style="font-size: 20px;padding-left: 4px;">
                    <ArrowRight />
                </el-icon>
            </div>
            <div class="item-grid">
                <div class="g-item">
                    <div class="g-item-img">
                        <div class="img-start">
                            <img src="/src/assets/svg/start.svg" alt="">
                        </div>
                    </div>
                    <div class="g-i-desc">《超级面对面》第250期keshi：我的音乐永远最新鲜</div>
                </div>
            </div>
        </div>

        <div class="h-item">
            <div class="item-title">
                最新音乐
                <el-icon style="font-size: 20px;padding-left: 4px;">
                    <ArrowRight />
                </el-icon>
            </div>
            <div class="new-grid">
                <div class="g-t">
                    <div class="g-item">
                        <div class="g-item-img">
                            <div class="img-start">
                                <img src="/src/assets/svg/start.svg" alt="">
                            </div>
                        </div>
                        <div class="g-music">
                            <div class="m-no">01</div>
                            <div class="m-left" style="padding-left: 8px;">
                                <div class="ell">
                                    <span class="m-name">小美满</span>
                                    <span class="m-desc">xxxx</span>
                                </div>
                                <div class="m-author">
                                    <div class="hi-res">Hi-Res</div>
                                    <span>周深</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
// console.log('>>>>>>__dirname',@)
import { onMounted, reactive } from "vue";
import { fetchBanner } from "../../service/global";
import { AxiosResponse } from "axios";
import { forEach, isArray } from "lodash-es";
interface objInter {
    banners: any[]
}

const datas: objInter = reactive({
    banners: []
})

function getBanner(){
    fetchBanner().then(function (res : any[] | AxiosResponse){
        // console.log('>>>',res)
        if(res && isArray(res)){
            let data = [];
            forEach((res || []),item => {
                data.push(item)
            })
            datas.banners = data;
        }
       
    })
}

onMounted(()=> {
    getBanner();

})

</script>
<style lang="less" scoped>
.h-item {
    padding: 30px;

    .item-title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        color: @color;

    }

    .item-grid {
        padding-top: 15px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .g-item {
            width: 19%;
            cursor: pointer;

            .g-item-img {
                position: relative;
                width: 100%;
                height: 150px;
                border-radius: 6px;
                background-color: #f8f8f8;
                .g-desc{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    background-color: rgba(0,0,0,.2);
                    color: #ffff;
                    font-size: 13px;
                    padding: 15px;
                    opacity: 0;
                    box-sizing: border-box;
                }

                .img-start {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 30px;
                    height: 30px;
                    position: absolute;
                    right: 10px;
                    bottom: 10px;
                    border-radius: 50%;
                    background-color: #ebebeb;
                    opacity: 0;

                    img {
                        width: 20px;
                        height: 20px;
                    }
                }
                &:hover{
                    .g-desc,.img-start{
                        opacity: 0.9;
                    }
                }
            }


            .g-i-desc {
                padding-top: 8px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                color: @color;
                font-size: 14px;
                &:hover {
                    color: @hoverColor;
                }
            }
        }
    }
    .new-grid {
        padding-top: 15px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .g-t {
            width: 48%;
            border-top: 1px solid @defBorderColor;
        }
        .g-item {
            width: 100%;
            padding: 10px 6px;
            display: flex;
            border-radius: 4px;
            cursor: pointer;
            &:hover {
                background-color: @hoverbg;
            }
            .g-item-img {
                position: relative;
                width: 100px;
                height: 100px;
                background-color: #f8f8f8;
                border-radius: 4px;
                display: flex;
                justify-content: center;
                align-items: center;
                .img-start {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    background-color: #ebebeb;
                    img {
                        width: 20px;
                        height: 20px;
                    }
                }
            }
            .g-music {
                width: calc(100% - 110px);
                display: flex;
                align-items: center;
               .m-name {
                    color: @color;
                    font-size: 15px;
                }
                .m-no {
                    font-size: 14px;
                    padding: 0px 10px;
                }
                .m-left {
                    width: calc(100% - 30px);
                }
                .m-no,.m-author,.m-desc {
                    color: @fzFontColor;
                }
                .m-desc {
                    padding-left: 8px;
                    font-size: 15px;
                }
                .m-author {
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    padding-top: 4px;
                    .hi-res {
                        border: 1px solid #fe672e;
                        padding: 1px;
                        border-radius: 2px;
                        color: #fe672e;
                        margin-right: 3px;
                        font-size: 10px !important;
                    }
                }
                
            }
        }
    }

}

.el-carousel__item {
    border-radius: 4px;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
.carousel {
    padding: 30px;
    .car-item {
        position: relative;
        img {
            border-radius: 4px;
        }
        .title {
            position: absolute;
            z-index: 1;
            bottom: 5px;
            right: 0;
            font-size: 13px;
            padding: 2px 8px;
            border-top-left-radius: 4px;
            border-bottom-right-radius: 4px;
            color: #ffff;
        }
    }

    :deep(.el-carousel__button) {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: @defPointerColor;
    }

    :deep(.is-active) {
        .el-carousel__button {
            background-color: @defPointerRedColor;
        }
    }

}

</style>